<template>
  <div class="card-list">
    <div class="card" style="border-color: #3b83ff" @click="onRouterSkip('/testSampleDataManageSystem/historySampleData')">
      <div class="card-left">
        <div class="name">历史样本数据管理</div>
      </div>
      <div class="card-right" style="background: #dce9fe">
        <el-icon>
          <Document style="color: #3b83ff" />
        </el-icon>
      </div>
    </div>

    <div class="card" style="border-color: #37c37b" @click="onRouterSkip('/testSampleDataManageSystem/testSampleData')">
      <div class="card-left">
        <div class="name">试验样本数据管理</div>
      </div>
      <div class="card-right" style="background: #d5f5e7">
        <el-icon>
          <Search style="color: #37c37b" />
        </el-icon>
      </div>
    </div>

    <div class="card" style="border-color: #f29f3f" @click="onRouterSkip('/similarityEvaluateSystem/testSampleSelected')">
      <div class="card-left">
        <div class="name">相似性评估管理</div>
      </div>
      <div class="card-right" style="background: #fff1e1">
        <el-icon>
          <Operation style="color: #f29f3f" />
        </el-icon>
      </div>
    </div>

    <div class="card" style="border-color: #f07171" @click="onRouterSkip('/similarityEvaluateSystem/patchEvaluate')">
      <div class="card-left">
        <div class="name">批量评估</div>
      </div>
      <div class="card-right" style="background: #feeaea">
        <el-icon>
          <PictureRounded style="color: #f07171" />
        </el-icon>
      </div>
    </div>

    <div class="card" style="border-color: #937aff" @click="onRouterSkip('/antiJamPerformCalculateSystem/confidenceEvaluate')">
      <div class="card-left">
        <div class="name">置信度评估</div>
      </div>
      <div class="card-right" style="background: #d0d3fe">
        <el-icon>
          <Notification style="color: #937aff" />
        </el-icon>
      </div>
    </div>

    <div class="card" style="border-color: #FF00FF" @click="onRouterSkip('/antiJamPerformCalculateSystem/testSampleSelected')">
      <div class="card-left">
        <div class="name">抗干扰性能推算</div>
      </div>
      <div class="card-right" style="background: rgba(255, 0, 255, 0.2)">
        <el-icon>
          <Share style="color: #FF00FF" />
        </el-icon>
      </div>
    </div>

    <div class="card" style="border-color: #ff0080" @click="onRouterSkip('/antiJamPerformBoundaryCalculate/testSampleSelected')">
      <div class="card-left">
        <div class="name">抗干扰边界推算</div>
      </div>
      <div class="card-right" style="background: rgba(255, 0, 128, 0.2)">
        <el-icon>
          <TrendCharts style="color: #ff0080" />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Document, Search, Operation, PictureRounded, Share, Notification, TrendCharts } from '@element-plus/icons-vue';

let $router = useRouter();

// 路由跳转
const onRouterSkip = (path: string) => {
  $router.push({ path });
}

</script>

<style lang="scss" scoped>
.card-list {
  display: flex;
  flex-wrap: wrap;
  .card {
    padding: 14px 0px;
    border-radius: 4px;
    overflow: hidden;
    border-left: 6px solid;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: calc(25% - 26px);
    background-color: var(--system-page-background);
    margin: 10px;
    box-shadow: 3px 3px 10px 0 rgba(58, 59, 69, 0.15);
    cursor: pointer;
    &-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-left: 20px;
      .name {
        line-height: 18px;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
      }
      .detail {
        font-size: 20px;
        font-weight: bold;
        color: var(--system-page-color);
      }
    }
    &-right {
      margin-right: 15px;
      padding: 4px 4px 0px 4px;
      i {
        font-size: 30px;
        font-weight: 900;
      }
    }
  }
  .card:hover {
    background: rgb(59, 131, 255, 0.2);
  }
  @media screen and (max-width: 1200px) {
    .card {
      width: calc(50% - 26px);
    }
  }
  @media screen and (max-width: 500px) {
    .card {
      width: calc(100% - 26px);
    }
  }
}
</style>
